<template>
  <div class="dynamic-container">
    <!-- 面包屑导航 -->
    <nav class="breadcrumb-nav">
      <router-link to="/" class="nav-link">首页</router-link>
      <span class="separator">/</span>
      <router-link to="/ptdt" class="nav-link">平台动态</router-link>
      <span class="separator">/</span>
      <span class="current-page">平台动态详情页</span>
    </nav>
    <!-- 带边框的内容区域 -->
    <div class="border-container">
      <!-- 顶部大图 -->
      <div class="banner-container">
        <h1 class="banner-title">
          <span class="title-text"
            >PLJH-23-4-13三一石油智能装备询比价公告-XJ202304130222项目标名</span
          >
        </h1>
        <div class="publish-time-container">
          <span class="publish-time">发布时间：2023年04月13日</span>
        </div>
        <img
          src="/images/平台动态详情页/u466.png"
          alt="详情页顶部图片"
          class="banner-image"
        />
        <div class="attachment-container">
          <a href="#" class="attachment-link">
            <span class="icon">📎</span>
            <span class="ip1">附件：</span>
            <span class="icon">📄</span>
            <span class="ip2">PLJH-23-4-13三一石油智能装备询比价公告详细说明</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();


const goToPage = (path) => {
  router.push(path);
};
</script>

<style scoped>
.dynamic-container {
  width: 100%;
}
.list-outer-container {
  background: white;
  border-radius: 0.8rem;
  padding: 40px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.breadcrumb-nav {
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
  color: #666;
  text-align: left;
}
.nav-link {
  color: inherit;
  transition: color 0.3s;
}
.nav-link:hover {
  color: #165dff;
}

.separator {
  margin: 0 0.5rem;
}

.current-page {
  color: #25262a;
  font-weight: 500;
}
.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.border-container {
  background: white;
  border-radius: 0.8rem;
  padding: 40px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.banner-container {
  position: relative;
  text-align: center;
}
.banner-title {
  position: relative;
  color: rgb(0, 0, 0);
  font-size: 2rem;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.title-text {
  display: inline-block;
  padding-bottom: 15px;
}
.publish-time-container {
  padding-bottom: 40px;
  border-bottom: 1px solid #e9e9e9;
}
.publish-time {
  padding-top: 100px;
  color: rgb(0, 0, 0);
  font-size: 1rem;
}
.attachment-container {
  text-align: left;
  margin-top: 15px;
}

.attachment-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: all 0.2s;
}
.ip1{
    color: #0c0c0c;
}
.ip2{
    color: #ababab;
}
.attachment-link:hover {
  color: #0039b3;
  text-decoration: underline;
  transform: translateX(2px);
}

.mr-2 {
  margin-right: 0.5rem;
}
</style>
